<script setup lang="ts">
import PostSend from '@/components/post/PostSend.vue'
import PostList from '@/components/post/PostList.vue'
import InfoCard from '@/components/post/PostInfoCard.vue'
import { useAccountStore } from '@/stores/account';
import { getPostListApi } from '@/api/path/post';
import { computed, onMounted, ref, watch } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute();
const uid = ref(route.query.userId);
onMounted(() => {
  if(uid.value){
    getPosts(uid.value);
  }
});

const posts = ref([]);

// 是否动态列表长度为0
const isHadPosts = ref(false);

const notDeletedPostsCount = computed(() => {
  return posts.value.filter(post => !post.isDelete).length; 
});

const getPosts = (uid: string)=>{
  getPostListApi(uid).then(res => {
    if (res.success) {
      posts.value = res.postList;
      // console.log(posts.value)
      if( notDeletedPostsCount.value > 0){
        isHadPosts.value = true;
      }
    }
    else {
      // ElMessage.error(res.msg);
    }
  })
}

const handleUpdateList = (shouldUpdate: Boolean) => {
  if (shouldUpdate) {
    getPosts(uid.value);
  }
}

</script>
<template>
  <div class="all-container">
    <el-row :gutter="20">
        <el-col :span="8">
            <!-- 用户信息展示区域 -->
        <div class="information">
          <el-affix :offset="80">
            <InfoCard />
          </el-affix>
        </div>
        </el-col>
        <el-col :span="8" style="padding-left: 0px;padding-right: 0px;">
            <!-- 动态发布和列表区域 -->
            <div class="post-area">
                <!-- 动态发布区域 -->
                <div class="post-send">
                <PostSend @updateList="handleUpdateList"/>
                </div>
                <!-- 动态列表区域 -->
                <div class="post-list">
                <PostList @updateList="handleUpdateList" :posts="posts" :is-had-posts="isHadPosts"/>
                </div>
            </div>
        </el-col>
    </el-row>
    <el-backtop :right="100" :bottom="100" />
  </div>
</template>
<style scoped>

.all-container {
  width: auto;
  padding: 10px;
  width: 100%;
  background-color: var(--color-light);
  min-height: 93vh;
}
.information {
  flex: 0 0 300px; /* 固定宽度 */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  
}

.post-area {
  background-color: var(--color-light);
  min-width: 600px;
  display: flex;
  flex-direction: column; /* 子元素垂直排列 */
}

.post-send, .post-list {
  background-color: var(--color-light);
  background-color: white; /* 背景色 */
  margin-bottom: 20px; /* 与下方元素的间隔 */
}

.post-send {
  width:auto;
  background-color: var(--color-light);
}

.post-list {
    width:auto;
    background-color: var(--color-light);
}
</style>